<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			:title="headerTitle" 
			width="70%" 
			:visible.sync="DialogVisible"
		>
			
			<el-row :gutter="20">

				<el-form 
					v-if = "editForm != null"
					ref="dialogForm"
					:rules="rules"
					size="mini"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="职位名称" prop="name">
		      				<el-input v-model="editForm.name" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="职位编码" prop="code">
		      				<el-input v-model="editForm.code" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="状态">
		      				<el-switch
							  v-model="editForm.$status"
							  active-text="开启"
							  inactive-text="关闭">
							</el-switch>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="排序" prop="sort">
		      				<el-input v-model="editForm.sort" type="number" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="备注">
		      				<el-input v-model="editForm.remark" type="textarea" row="4" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确定</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { getRolesTree } from "@/api/admin/roles"
import { getUserInfo } from "@/api/user"

export default{

	props:{
		//新增还是编辑
	    type:{
	      type:[Number,String],
	      defalut:1
	    },
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	computed:{
		DialogVisible:{
			get(){
				return this.visible
			},
			set(val){

			}
		},
	},
	watch:{
		form(newVal,oldVal){
			if(newVal != null){
				this.editForm = newVal;
			}else{
				this.editForm = this.defaultForm;
			}	
		},
		type(newVal,oldVal){
	      	if(newVal == 1){
	        	this.headerTitle = "添加职位"
	      	}else if(newVal == 2){
	        	this.headerTitle = "修改职位"
	      	}
	    }
	},
	data(){
		return{
			headerTitle:"添加角色",
			defaultForm:{
				name:'',
				code:'',
				sort:'',
				remark:'',
				status:'ENABLE',
				$status:true
			},
			roleTree:[],
			editForm:null,
			formLabelWidth:'100px',
			//验证规则
		    rules:{
		        name:[{required:true,message:"请输入职位名称",trigger:"blur"}],
		        code:[{required:true,message:"请输入职位编码",trigger:"blur"}],
		        sort:[{required:true,message:"请输入排序",trigger:"blur"}],
		    },
		}
	},
	mounted(){
		this.getRoleTree();
	},
	methods:{
		//获取树形菜单
		getRoleTree(){
			getUserInfo().then((res)=>{
				
				getRolesTree(res.data.data.id).then((res)=>{
					console.log("-----------获取树形菜单-----------")
					console.log(res);
					this.roleTree = res.data;
				})
			})
		},
		//取消按钮
		cancel(){
			this.$emit('cancel')
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          
		          this.$emit('confirm',{type:this.type,data:this.editForm});

		        } else {
		           
		            return false;
		        }

      		})
		}

	}
}


</script>

<style scoped>
	
</style>